/**
 * @description 列表页面对应的属性组件
 */

import React, { useEffect, useMemo, useState, useContext, useRef } from 'react'
import { Collapse, Form, Select, Input, InputNumber, Radio, Tooltip } from 'antd';
import {
  InfoCircleOutlined
} from '@ant-design/icons';

import { replaceObjectStyle, replaceCssStyle } from '@/utils/style';
import { setAttrForm } from '@/utils/AttrForm';
import { debounce } from 'lodash-es'
import { copyTemplate, pasteTemplate, copyBlock, pasteBlock } from '@/utils/clipboard';
import { FlagOptions, TimeFormatTip, TimeFormatUrl, iconTextReg } from '@/utils/Const';
import { goodTypeOptions, switchGoodType } from '@/utils/goodList';
import { UpdateContext } from '@/store/updateContext';

import StyleWrapper from '@/components/StylesWrapper';
import CssEdit from '@/components/Monaco/CssEidt';
import AttrHeaderBtn from './Components/AttrHeaderBtn';
import AttrExtra from './Components/AttrExtra';
import GoodAttrEntry from './GoodAttr';

const dotPosOptions = [
  {
    label: '上',
    value: 'top'
  },
  {
    label: '下',
    value: 'bottom'
  },
  {
    label: '左',
    value: 'left'
  },
  {
    label: '右',
    value: 'right'
  },
]

function DetailAtrr({ template2, onConfigEvent, setIsRightAttr, actKey }) {

  const updateCtx = useContext(UpdateContext)
  const [form] = Form.useForm()
  // css编辑器
  const [open, setOpen] = useState(false)
  // css编辑器实例
  const cssEditRef = useRef()

  // 更新style样式文件
  let upateStyleEvent = (keys) => {
    let divData = Object.assign({}, form.getFieldValue(keys))

    // keys数组的最后一项，就是key
    let key = keys.at(-1)
    replaceObjectStyle(actKey, key, divData)
  }

  // 组件css变化
  let cssChange = (value) => {
    form.setFieldValue('css', value)
    replaceCssStyle(actKey, value)
  }

  // input组件onChange事件防抖
  let onConfigEvent_debounce = debounce((keys, newValue) => {
    onConfigEvent(keys, newValue)
  }, 300)

  // 图标输入框变化事件，比普通输入框，多一个字符串转化逻辑
  let iconEvent = (keys, value) => {

    // 去除 空格、<、/> 
    let newValue = value.replace(iconTextReg, '')
    form.setFieldValue(keys, newValue)

    onConfigEvent(keys, newValue)
  }

  // 头部按钮事件
  let handleHeaderEvent = (key) => {
    switch (key) {

      // 打开组件css编辑
      case 'css':
        setOpen(true)
        break;

      // 复制模板
      case 'copy':
        copyTemplate(actKey, [], form)
        break;

      // 黏贴模板
      case 'paste':
        pasteTemplate(form, onConfigEvent, actKey)
        updateCtx.setUpdateFlag(pre => !pre)

        // 修改css编辑器的值
        cssEditRef.current.setValue(form.getFieldValue('css'))
        break;

      // 切换位置
      case 'position':
        setIsRightAttr((isRight) => !isRight)
        break;

      default:
        break;
    }
  }

  // 属性栏右上角按钮事件
  let handleAttrEvent = (eventKey, blockKey, paramKeys, classKey) => {
    switch (eventKey) {

      // 复制模块
      case 'copy':
        copyBlock(actKey, blockKey, paramKeys, classKey, form)
        break;

      // 黏贴模块
      case 'paste':
        pasteBlock(actKey, blockKey, paramKeys, classKey, form, onConfigEvent)
        updateCtx.setUpdateFlag(pre => !pre)
        break;


      default:
        break;
    }
  }

  // -----------------------------------
  // 构造折叠面板的数据
  // -----------------------------------
  let items = useMemo(() => {

    let items = [
      {
        key: "page",
        label: "总盒子",
        children:
          <StyleWrapper form={form} preKeys={['page', 'default']} onStyleChange={() => upateStyleEvent(['page'])} />
      },
      {
        key: "share",
        label: "分享",
        children:
          <StyleWrapper form={form} preKeys={['share', 'default']} onStyleChange={() => upateStyleEvent(['share'])} />
      },
      {
        key: "attr",
        label: "商品属性",
        extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'attr', ['attr'], 'attr')} />,
        children:
          <Collapse accordion items={[
            {
              key: "box",
              label: "盒子",
              children: <StyleWrapper form={form} preKeys={['attr', 'attr_box', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_box'])} />
            },
            {
              key: "title",
              label: "标题",
              children:
                <Collapse accordion items={[
                  {
                    key: "box",
                    label: "盒子",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_title', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_title'])} />
                  },
                  {
                    key: "text",
                    label: "标题",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_title_text', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_title_text'])} />
                  },
                  {
                    key: "btn",
                    label: "收藏按钮",
                    children:
                      <>
                        <Form.Item
                          label="未收藏图标"
                          name={['attr', 'base', 'unStoreup_icon']}
                        >
                          <Input
                            onChange={(e) => iconEvent(['attr', 'base', 'unStoreup_icon'], e.target.value)}
                          />
                        </Form.Item>

                        <Form.Item
                          label="已收藏图标"
                          name={['attr', 'base', 'storeup_icon']}
                        >
                          <Input
                            onChange={(e) => iconEvent(['attr', 'base', 'storeup_icon'], e.target.value)}
                          />
                        </Form.Item>

                        <StyleWrapper form={form} preKeys={['attr', 'attr_title_btn', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_title_btn'])} />

                      </>
                  },
                  {
                    key: "btn-hover",
                    label: "收藏按钮-悬浮",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_title_btn', 'hover']} onStyleChange={() => upateStyleEvent(['attr', 'attr_title_btn'])} />
                  },
                ]} />
            },
            {
              key: "coupon",
              label: "优惠券",
              children:
                <Collapse accordion items={[
                  {
                    key: "box",
                    label: "盒子",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_coupon', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_coupon'])} />
                  },
                  {
                    key: "btn",
                    label: "优惠券按钮",
                    children:
                      <StyleWrapper form={form} preKeys={['attr', 'attr_coupon_btn', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_coupon_btn'])} />
                  },
                  {
                    key: "btn-hover",
                    label: "优惠券-悬浮",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_coupon_btn', 'hover']} onStyleChange={() => upateStyleEvent(['attr', 'attr_coupon_btn'])} />
                  },
                ]} />
            },
            {
              key: "countdown",
              label: "倒计时",
              children:
                <Collapse accordion items={[
                  {
                    key: "box",
                    label: "盒子",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_countdown', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_countdown'])} />
                  },
                  {
                    key: "label",
                    label: "标签",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_countdown_label', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_countdown_label'])} />
                  },
                  {
                    key: "text",
                    label: "倒计时",
                    children:
                      <>
                        <Form.Item
                          label="格式"
                          name={['attr', 'base', 'countdown_format']}
                        >
                          <Input
                            onChange={(e) => onConfigEvent(['attr', 'base', 'countdown_format'], e.target.value)}
                            suffix={
                              <Tooltip title={TimeFormatTip}>
                                <InfoCircleOutlined
                                  style={{
                                    color: 'rgba(0,0,0,.45)',
                                  }}
                                  onClick={() => window.open(TimeFormatUrl, "_blank")}
                                />
                              </Tooltip>
                            }
                          />
                        </Form.Item>
                        <StyleWrapper form={form} preKeys={['attr', 'attr_countdown_text', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_countdown_text'])} />
                      </>
                  },

                ]} />
            },
            {
              key: "price",
              label: "价格",
              children:
                <Collapse accordion items={[
                  {
                    key: "box",
                    label: "盒子",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_price', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_price'])} />
                  },
                  {
                    key: "label",
                    label: "标签",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_price_label', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_price_label'])} />
                  },
                  {
                    key: "text",
                    label: "文本",
                    children:
                      <StyleWrapper form={form} preKeys={['attr', 'attr_price_text', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_price_text'])} />
                  }
                ]} />
            },
            {
              key: "link",
              label: "下载",
              children:
                <Collapse accordion items={[
                  {
                    key: "box",
                    label: "盒子",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_link', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_link'])} />
                  },
                  {
                    key: "label",
                    label: "标签",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_link_label', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_link_label'])} />
                  },
                  {
                    key: "btn",
                    label: "下载按钮",
                    children:
                      <StyleWrapper form={form} preKeys={['attr', 'attr_link_text', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_link_text'])} />
                  },
                  {
                    key: "btn-hover",
                    label: "下载按钮-悬浮",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_link_text', 'hover']} onStyleChange={() => upateStyleEvent(['attr', 'attr_link_text'])} />
                  },
                ]} />
            },
            {
              key: "others",
              label: "其它",
              children:
                <Collapse accordion items={[
                  {
                    key: "box",
                    label: "盒子",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_others', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_others'])} />
                  },
                  {
                    key: "label",
                    label: "标签",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_others_label', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_others_label'])} />
                  },
                  {
                    key: "text",
                    label: "内容",
                    children:
                      <StyleWrapper form={form} preKeys={['attr', 'attr_others_text', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_others_text'])} />

                  },
                ]} />
            },
            {
              key: "audio",
              label: "音频",
              children:
                <Collapse accordion items={[
                  {
                    key: "box",
                    label: "盒子",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_audio', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_audio'])} />
                  },
                  {
                    key: "label",
                    label: "标签",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_audio_label', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_audio_label'])} />
                  },
                  {
                    key: "text",
                    label: "音频",
                    children:
                      <StyleWrapper form={form} preKeys={['attr', 'attr_audio_text', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_audio_text'])} />

                  },
                ]} />
            },
            {
              key: "pay-btn",
              label: "支付类按钮",
              children:
                <Collapse accordion items={[
                  {
                    key: "box",
                    label: "盒子",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_pay', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_pay'])} />
                  },
                  {
                    key: "number",
                    label: "数值输入框",
                    children:
                      <StyleWrapper form={form} preKeys={['attr', 'attr_number', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_number'])} />
                  },
                  {
                    key: "number-focus",
                    label: "数值输入框-聚焦",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_number', 'focus']} onStyleChange={() => upateStyleEvent(['attr', 'attr_number'])} />
                  },
                  {
                    key: "cart",
                    label: "添加到购物车",
                    children:
                      <StyleWrapper form={form} preKeys={['attr', 'attr_cart', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_cart'])} />
                  },
                  {
                    key: "cart-hover",
                    label: "添加到购物车-悬浮",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_cart', 'hover']} onStyleChange={() => upateStyleEvent(['attr', 'attr_cart'])} />
                  },
                  {
                    key: "buy",
                    label: "立即购买",
                    children:
                      <StyleWrapper form={form} preKeys={['attr', 'attr_buy', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_buy'])} />
                  },
                  {
                    key: "buy-hover",
                    label: "立即购买-悬浮",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_buy', 'hover']} onStyleChange={() => upateStyleEvent(['attr', 'attr_buy'])} />
                  },
                  {
                    key: "score",
                    label: "积分兑换",
                    children:
                      <StyleWrapper form={form} preKeys={['attr', 'attr_score', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_score'])} />
                  },
                  {
                    key: "score-hover",
                    label: "积分兑换-悬浮",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_score', 'hover']} onStyleChange={() => upateStyleEvent(['attr', 'attr_score'])} />
                  },
                  {
                    key: "reserve",
                    label: "立即预订",
                    children:
                      <StyleWrapper form={form} preKeys={['attr', 'attr_reserve', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_reserve'])} />
                  },
                  {
                    key: "reserve-hover",
                    label: "立即预订-悬浮",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_reserve', 'hover']} onStyleChange={() => upateStyleEvent(['attr', 'attr_reserve'])} />
                  },
                ]} />
            },
            {
              key: "action-btn",
              label: "操作类按钮",
              children:
                <Collapse accordion items={[
                  {
                    key: "box",
                    label: "盒子",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_action', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_action'])} />
                  },
                  {
                    key: "edit",
                    label: "编辑",
                    children:
                      <StyleWrapper form={form} preKeys={['attr', 'attr_edit', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_edit'])} />
                  },
                  {
                    key: "edit-hover",
                    label: "编辑-悬浮",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_edit', 'hover']} onStyleChange={() => upateStyleEvent(['attr', 'attr_edit'])} />
                  },
                  {
                    key: "delete",
                    label: "删除",
                    children:
                      <StyleWrapper form={form} preKeys={['attr', 'attr_delete', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_delete'])} />
                  },
                  {
                    key: "delete-hover",
                    label: "删除-悬浮",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_delete', 'hover']} onStyleChange={() => upateStyleEvent(['attr', 'attr_delete'])} />
                  },
                  {
                    key: "other",
                    label: "其它",
                    children:
                      <StyleWrapper form={form} preKeys={['attr', 'attr_other', 'default']} onStyleChange={() => upateStyleEvent(['attr', 'attr_other'])} />
                  },
                  {
                    key: "other-hover",
                    label: "其它-悬浮",
                    children: <StyleWrapper form={form} preKeys={['attr', 'attr_other', 'hover']} onStyleChange={() => upateStyleEvent(['attr', 'attr_other'])} />
                  }
                ]} />
            },
          ]} />
      },
      {
        key: "picture",
        label: "轮播图",
        extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'detailpicture', ['detailpicture'], 'detailpicture')} />,
        children:
          <Collapse accordion items={[
            {
              key: 'base',
              label: '基础属性',
              children:
                <>
                  <Form.Item
                    label="显示箭头"
                    name={['detailpicture', 'base', 'arrows']}
                  >
                    <Radio.Group
                      options={FlagOptions}
                      onChange={(e) => onConfigEvent(['detailpicture', 'base', 'arrows'], e.target.value)}
                      optionType="button"
                      buttonStyle="solid"
                    />
                  </Form.Item>

                  <Form.Item
                    label="自动切换"
                    name={['detailpicture', 'base', 'autoplay']}
                  >
                    <Radio.Group
                      options={FlagOptions}
                      onChange={(e) => onConfigEvent(['detailpicture', 'base', 'autoplay'], e.target.value)}
                      optionType="button"
                      buttonStyle="solid"
                    />
                  </Form.Item>

                  <Form.Item
                    label="自动切换的间隔（毫秒）"
                    name={['detailpicture', 'base', 'autoplaySpeed']}
                  >
                    <InputNumber
                      min={100}
                      precision={0}
                      onChange={(value) => onConfigEvent(['detailpicture', 'base', 'autoplaySpeed'], value)}
                    />
                  </Form.Item>

                  <Form.Item
                    label="面板指示点"
                    name={['detailpicture', 'base', 'dots']}
                  >
                    <Radio.Group
                      options={FlagOptions}
                      onChange={(e) => onConfigEvent(['detailpicture', 'base', 'dots'], e.target.value)}
                      optionType="button"
                      buttonStyle="solid"
                    />
                  </Form.Item>

                  <Form.Item
                    label="面板指示点位置"
                    name={['detailpicture', 'base', 'dotPosition']}
                  >
                    <Select
                      options={dotPosOptions}
                      onChange={(value) => onConfigEvent(['detailpicture', 'base', 'dotPosition'], value)}
                    />
                  </Form.Item>
                </>
            },
            {
              key: 'box',
              label: '总盒子',
              children: <StyleWrapper form={form} preKeys={['detailpicture', 'detailpicture_box', 'default']} onStyleChange={() => upateStyleEvent(['detailpicture', 'detailpicture_box'])} />
            },
            {
              key: 'pre',
              label: '左箭头',
              children: <Collapse accordion size='middle' items={[
                {
                  key: 'box',
                  label: '盒子',
                  children: <StyleWrapper form={form} preKeys={['detailpicture', 'detailpicture_pre', 'default']} onStyleChange={() => upateStyleEvent(['detailpicture', 'detailpicture_pre'])} />
                },
                {
                  key: 'box-hover',
                  label: '盒子-悬浮',
                  children: <StyleWrapper form={form} preKeys={['detailpicture', 'detailpicture_pre', 'hover']} onStyleChange={() => upateStyleEvent(['detailpicture', 'detailpicture_pre'])} />
                },
                {
                  key: 'icon',
                  label: '图标',
                  children: <StyleWrapper form={form} preKeys={['detailpicture', 'detailpicture_pre_icon', 'default']} onStyleChange={() => upateStyleEvent(['detailpicture', 'detailpicture_pre_icon'])} />
                },
              ]} />
            },
            {
              key: 'next',
              label: '右箭头',
              children: <Collapse accordion size='middle' items={[
                {
                  key: 'box',
                  label: '盒子',
                  children: <StyleWrapper form={form} preKeys={['detailpicture', 'detailpicture_next', 'default']} onStyleChange={() => upateStyleEvent(['detailpicture', 'detailpicture_next'])} />
                },
                {
                  key: 'box-hover',
                  label: '盒子-悬浮',
                  children: <StyleWrapper form={form} preKeys={['detailpicture', 'detailpicture_next', 'hover']} onStyleChange={() => upateStyleEvent(['detailpicture', 'detailpicture_next'])} />
                },
                {
                  key: 'icon',
                  label: '图标',
                  children: <StyleWrapper form={form} preKeys={['detailpicture', 'detailpicture_next_icon', 'default']} onStyleChange={() => upateStyleEvent(['detailpicture', 'detailpicture_next_icon'])} />
                },
              ]} />
            },
            {
              key: 'dot',
              label: "指示点",
              children: <Collapse accordion size='middle' items={[
                {
                  key: 'box',
                  label: '盒子',
                  children: <StyleWrapper form={form} preKeys={['detailpicture', 'detailpicture_dot_box', 'default']} onStyleChange={() => upateStyleEvent(['detailpicture', 'detailpicture_dot_box'])} />
                },
                {
                  key: 'dot',
                  label: '指示点',
                  children: <StyleWrapper form={form} preKeys={['detailpicture', 'detailpicture_dot', 'default']} onStyleChange={() => upateStyleEvent(['detailpicture', 'detailpicture_dot'])} />
                },
                {
                  key: 'dot-hover',
                  label: '指示点-悬浮',
                  children: <StyleWrapper form={form} preKeys={['detailpicture', 'detailpicture_dot', 'hover']} onStyleChange={() => upateStyleEvent(['detailpicture', 'detailpicture_dot'])} />
                },
                {
                  key: 'dot-active',
                  label: '指示点-激活',
                  children: <StyleWrapper form={form} preKeys={['detailpicture', 'detailpicture_dot_active', 'default']} onStyleChange={() => upateStyleEvent(['detailpicture', 'detailpicture_dot_active'])} />
                },
              ]} />
            },
            {
              key: 'img',
              label: "图片",
              children: <StyleWrapper form={form} preKeys={['detailpicture', 'detailpicture_img', 'default']} onStyleChange={() => upateStyleEvent(['detailpicture', 'detailpicture_img'])} />
            }
          ]} />

      },
      {
        key: "thumbsup",
        label: "赞/踩",
        extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'thumbsup', ['thumbsup'], 'thumbsup')} />,
        children:
          <Collapse accordion items={[
            {
              key: 'icon',
              label: '图标',
              children:
                <>
                  <Form.Item
                    label="赞"
                    name={['thumbsup', 'base', 'like_icon']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['thumbsup', 'base', 'like_icon'], e.target.value)}
                    />
                  </Form.Item>

                  <Form.Item
                    label="已赞"
                    name={['thumbsup', 'base', 'like_active_icon']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['thumbsup', 'base', 'like_active_icon'], e.target.value)}
                    />
                  </Form.Item>

                  <Form.Item
                    label="踩"
                    name={['thumbsup', 'base', 'unlike_icon']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['thumbsup', 'base', 'unlike_icon'], e.target.value)}
                    />
                  </Form.Item>

                  <Form.Item
                    label="已踩"
                    name={['thumbsup', 'base', 'unlike_active_icon']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['thumbsup', 'base', 'unlike_active_icon'], e.target.value)}
                    />
                  </Form.Item>

                </>
            },
            {
              key: 'box',
              label: '盒子',
              children: <StyleWrapper form={form} preKeys={['thumbsup', 'thumbsup_box', 'default']} onStyleChange={() => upateStyleEvent(['thumbsup', 'thumbsup_box'])} />
            },
            {
              key: 'like',
              label: '赞',
              children: <Collapse accordion items={[
                {
                  key: 'box',
                  label: '盒子',
                  children: <StyleWrapper form={form} preKeys={['thumbsup', 'thumbsup_like', 'default']} onStyleChange={() => upateStyleEvent(['thumbsup', 'thumbsup_like'])} />
                },
                {
                  key: 'box-hover',
                  label: '盒子-悬浮',
                  children: <StyleWrapper form={form} preKeys={['thumbsup', 'thumbsup_like', 'hover']} onStyleChange={() => upateStyleEvent(['thumbsup', 'thumbsup_like'])} />
                },
                {
                  key: 'box-active',
                  label: '盒子-激活(已赞)',
                  children: <StyleWrapper form={form} preKeys={['thumbsup', 'thumbsup_like_active', 'default']} onStyleChange={() => upateStyleEvent(['thumbsup', 'thumbsup_like_active'])} />
                },
                {
                  key: 'icon',
                  label: '图标',
                  children: <StyleWrapper form={form} preKeys={['thumbsup', 'thumbsup_like_icon', 'default']} onStyleChange={() => upateStyleEvent(['thumbsup', 'thumbsup_like_icon'])} />
                },
                {
                  key: 'text',
                  label: '文本',
                  children: <StyleWrapper form={form} preKeys={['thumbsup', 'thumbsup_like_text', 'default']} onStyleChange={() => upateStyleEvent(['thumbsup', 'thumbsup_like_text'])} />
                },
              ]} />
            },
            {
              key: 'unlike',
              label: '踩',
              children: <Collapse accordion items={[
                {
                  key: 'box',
                  label: '盒子',
                  children: <StyleWrapper form={form} preKeys={['thumbsup', 'thumbsup_unlike', 'default']} onStyleChange={() => upateStyleEvent(['thumbsup', 'thumbsup_unlike'])} />
                },
                {
                  key: 'box-hover',
                  label: '盒子-悬浮',
                  children: <StyleWrapper form={form} preKeys={['thumbsup', 'thumbsup_unlike', 'hover']} onStyleChange={() => upateStyleEvent(['thumbsup', 'thumbsup_unlike'])} />
                },
                {
                  key: 'box-active',
                  label: '盒子-激活(已赞)',
                  children: <StyleWrapper form={form} preKeys={['thumbsup', 'thumbsup_unlike_active', 'default']} onStyleChange={() => upateStyleEvent(['thumbsup', 'thumbsup_unlike_active'])} />
                },
                {
                  key: 'icon',
                  label: '图标',
                  children: <StyleWrapper form={form} preKeys={['thumbsup', 'thumbsup_unlike_icon', 'default']} onStyleChange={() => upateStyleEvent(['thumbsup', 'thumbsup_unlike_icon'])} />
                },
                {
                  key: 'text',
                  label: '文本',
                  children: <StyleWrapper form={form} preKeys={['thumbsup', 'thumbsup_unlike_text', 'default']} onStyleChange={() => upateStyleEvent(['thumbsup', 'thumbsup_unlike_text'])} />
                },
              ]} />
            },
          ]} />
      },
      {
        key: "video",
        label: "视频",
        children: <StyleWrapper form={form} preKeys={['detailvideo', 'default']} onStyleChange={() => upateStyleEvent(['detailvideo'])} />
      },
      {
        key: "tab",
        label: "商品详情",
        children:
          <Collapse accordion items={[
            {
              key: 'tab',
              label: '标签页Tab',
              extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'tab', ['detailtab'], 'detailtab')} />,
              children: <Collapse accordion items={[
                {
                  key: 'box',
                  label: '总盒子',
                  children: <StyleWrapper form={form} preKeys={['detailtab', 'detailtab_box', 'default']} onStyleChange={() => upateStyleEvent(['detailtab', 'detailtab_box'])} />
                },
                {
                  key: 'bar',
                  label: '头部',
                  children:
                    <Collapse accordion items={[
                      {
                        key: 'box',
                        label: '盒子',
                        children: <StyleWrapper form={form} preKeys={['detailtab', 'detailtab_bar', 'default']} onStyleChange={() => upateStyleEvent(['detailtab', 'detailtab_bar'])} />
                      },
                      {
                        key: 'list',
                        label: '列表盒子',
                        children: <StyleWrapper form={form} preKeys={['detailtab', 'detailtab_bar_list', 'default']} onStyleChange={() => upateStyleEvent(['detailtab', 'detailtab_bar_list'])} />
                      },
                      {
                        key: 'item',
                        label: 'item',
                        children: <StyleWrapper form={form} preKeys={['detailtab', 'detailtab_bar_item', 'default']} onStyleChange={() => upateStyleEvent(['detailtab', 'detailtab_bar_item'])} />
                      },
                      {
                        key: 'item-hover',
                        label: 'item-悬浮',
                        children: <StyleWrapper form={form} preKeys={['detailtab', 'detailtab_bar_item', 'hover']} onStyleChange={() => upateStyleEvent(['detailtab', 'detailtab_bar_item'])} />
                      },
                      {
                        key: 'item-active',
                        label: 'item-激活',
                        children: <StyleWrapper form={form} preKeys={['detailtab', 'detailtab_bar_item_active', 'default']} onStyleChange={() => upateStyleEvent(['detailtab', 'detailtab_bar_item_active'])} />
                      },
                    ]} />
                },
                {
                  key: 'content',
                  label: '内容盒子',
                  children: < StyleWrapper form={form} preKeys={['detailtab', 'detailtab_content', 'default']} onStyleChange={() => upateStyleEvent(['detailtab', 'detailtab_content'])} />
                },
              ]} />
            },
            {
              key: 'discuss',
              label: '评论',
              extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'discuss', ['discuss'], 'discuss')} />,
              children: <Collapse accordion items={[
                {
                  key: 'box',
                  label: '盒子',
                  children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_box', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_box'])} />
                },
                {
                  key: 'form',
                  label: '表单',
                  children: <Collapse accordion items={[
                    {
                      key: "box",
                      label: "总盒子",
                      children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_form', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_form'])} />
                    },
                    {
                      key: "ql",
                      label: "编辑器盒子",
                      children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_ql', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_ql'])} />
                    },
                    {
                      key: "ql-header",
                      label: "编辑器头部",
                      children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_ql_header', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_ql_header'])} />
                    },
                    {
                      key: "ql-container",
                      label: "编辑器输入框",
                      children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_ql_container', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_ql_container'])} />
                    },
                    {
                      key: "score",
                      label: "评分盒子",
                      children: <>
                        <Form.Item
                          label="图标"
                          name={['discuss', 'base', 'score_icon']}
                        >
                          <Input
                            onChange={(e) => iconEvent(['discuss', 'base', 'score_icon'], e.target.value)}
                          />
                        </Form.Item>

                        <StyleWrapper form={form} preKeys={['discuss', 'discuss_score', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_score'])} /></>
                    },
                    {
                      key: "btn",
                      label: "按钮盒子",
                      children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_btn', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_btn'])} />
                    },
                    {
                      key: "submit",
                      label: "提交按钮",
                      children: <>
                        <Form.Item
                          label="文本"
                          name={['discuss', 'base', 'ok_btn']}
                        >
                          <Input
                            onChange={(e) => onConfigEvent(['discuss', 'base', 'ok_btn'], e.target.value)}
                          />
                        </Form.Item>

                        <StyleWrapper form={form} preKeys={['discuss', 'discuss_ok', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_ok'])} />
                      </>
                    },
                    {
                      key: "submit-hover",
                      label: "提交按钮-悬浮",
                      children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_ok', 'hover']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_ok'])} />
                    },
                    {
                      key: "reset",
                      label: "重置按钮",
                      children: <>
                        <Form.Item
                          label="文本"
                          name={['discuss', 'base', 'reset_btn']}
                        >
                          <Input
                            onChange={(e) => onConfigEvent(['discuss', 'base', 'reset_btn'], e.target.value)}
                          />
                        </Form.Item>

                        <StyleWrapper form={form} preKeys={['discuss', 'discuss_reset', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_reset'])} />
                      </>
                    },
                    {
                      key: "reset-hover",
                      label: "重置按钮-悬浮",
                      children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_reset', 'hover']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_reset'])} />
                    },
                  ]} />
                },
                {
                  key: 'comments',
                  label: '评论内容',
                  children: <Collapse accordion items={[
                    {
                      key: "list",
                      label: "列表",
                      children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_comments', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_comments'])} />
                    },
                    {
                      key: "item",
                      label: "item",
                      children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_comments_item', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_comments_item'])} />
                    },
                    {
                      key: "box",
                      label: "评论",
                      children: <Collapse accordion items={[
                        {
                          key: "box",
                          label: "盒子",
                          children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_comments_comment', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_comments_comment'])} />
                        },
                        {
                          key: "img",
                          label: "图像",
                          children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_comment_img', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_comment_img'])} />
                        },
                        {
                          key: "name",
                          label: "昵称和评分",
                          children: <Collapse accordion items={[
                            {
                              key: "box",
                              label: "盒子",
                              children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_comment_namebox', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_comment_namebox'])} />
                            },
                            {
                              key: "name",
                              label: "昵称",
                              children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_comment_name', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_comment_name'])} />
                            },
                            {
                              key: "score",
                              label: "评分",
                              children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_comment_score', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_comment_score'])} />
                            },
                          ]} />
                        },
                        {
                          key: "btn",
                          label: "按钮",
                          children: <Collapse accordion items={[
                            {
                              key: "box",
                              label: "盒子",
                              children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_comment_btn', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_comment_btn'])} />
                            },
                            {
                              key: "reply",
                              label: "回复按钮",
                              children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_comment_reply', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_comment_reply'])} />
                            },
                            {
                              key: "reply-hover",
                              label: "回复按钮-悬浮",
                              children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_comment_reply', 'hover']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_comment_reply'])} />
                            },
                            {
                              key: "delete",
                              label: "删除按钮",
                              children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_comment_delete', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_comment_delete'])} />
                            },
                            {
                              key: "delete-hover",
                              label: "删除按钮-悬浮",
                              children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_comment_delete', 'hover']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_comment_delete'])} />
                            },
                          ]} />
                        },
                        {
                          key: "content",
                          label: "内容",
                          children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_comment_content', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_comment_content'])} />
                        },
                      ]} />
                    },
                    {
                      key: "reply",
                      label: "回复",
                      children: <Collapse accordion items={[
                        {
                          key: "box",
                          label: "列表",
                          children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_reply', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_reply'])} />
                        },
                        {
                          key: "item",
                          label: "item",
                          children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_reply_item', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_reply_item'])} />
                        },
                        {
                          key: "img",
                          label: "图像",
                          children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_reply_img', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_reply_img'])} />
                        },
                        {
                          key: "name",
                          label: "昵称",
                          children: <Collapse accordion items={[
                            {
                              key: "box",
                              label: "盒子",
                              children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_reply_namebox', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_reply_namebox'])} />
                            },
                            {
                              key: "name",
                              label: "昵称",
                              children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_reply_name', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_reply_name'])} />
                            },
                          ]} />
                        },
                        {
                          key: "btn",
                          label: "按钮",
                          children: <Collapse accordion items={[
                            {
                              key: "box",
                              label: "盒子",
                              children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_reply_btn', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_reply_btn'])} />
                            },
                            {
                              key: "delete",
                              label: "删除按钮",
                              children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_reply_delete', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_reply_delete'])} />
                            },
                            {
                              key: "delete-hover",
                              label: "删除按钮-悬浮",
                              children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_reply_delete', 'hover']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_reply_delete'])} />
                            },
                          ]} />
                        },
                        {
                          key: "content",
                          label: "内容",
                          children: <StyleWrapper form={form} preKeys={['discuss', 'discuss_reply_content', 'default']} onStyleChange={() => upateStyleEvent(['discuss', 'discuss_reply_content'])} />
                        },
                      ]} />
                    },
                  ]} />
                }
              ]} />
            },
            {
              key: 'chapter',
              label: '目录',
              extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'chapter', ['chapter'], 'chapter')} />,
              children: <Collapse accordion items={[
                {
                  key: 'box',
                  label: '盒子',
                  children: <StyleWrapper form={form} preKeys={['chapter', 'chapter_box', 'default']} onStyleChange={() => upateStyleEvent(['chapter', 'chapter_box'])} />
                },
                {
                  key: 'title',
                  label: '标题',
                  children: <StyleWrapper form={form} preKeys={['chapter', 'chapter_title', 'default']} onStyleChange={() => upateStyleEvent(['chapter', 'chapter_title'])} />
                },
                {
                  key: 'list',
                  label: '列表盒子',
                  children: <StyleWrapper form={form} preKeys={['chapter', 'chapter_list', 'default']} onStyleChange={() => upateStyleEvent(['chapter', 'chapter_list'])} />
                },
                {
                  key: 'item',
                  label: 'item',
                  children: <StyleWrapper form={form} preKeys={['chapter', 'chapter_item', 'default']} onStyleChange={() => upateStyleEvent(['chapter', 'chapter_item'])} />
                },
                {
                  key: 'item-hover',
                  label: 'item-悬浮',
                  children: <StyleWrapper form={form} preKeys={['chapter', 'chapter_item', 'hover']} onStyleChange={() => upateStyleEvent(['chapter', 'chapter_item'])} />
                },
                {
                  key: 'text',
                  label: '文本',
                  children: <StyleWrapper form={form} preKeys={['chapter', 'chapter_text', 'default']} onStyleChange={() => upateStyleEvent(['chapter', 'chapter_text'])} />
                },
                {
                  key: 'icon',
                  label: '图标',
                  children: <StyleWrapper form={form} preKeys={['chapter', 'chapter_icon', 'default']} onStyleChange={() => upateStyleEvent(['chapter', 'chapter_icon'])} />
                },
              ]} />
            },

          ]} />
      },
      {
        key: "hot",
        label: "热门信息",
        children:
          <>
            <Form.Item
              label="列表样式"
              name={['detailhot', 'base', 'type']}
            >
              <Select
                options={goodTypeOptions}
                onChange={(value) => switchGoodType(value, ['detailhot', 'base', 'type'], 'detailhot', onConfigEvent, form, actKey)}
              >
              </Select>
            </Form.Item >

            <Collapse accordion items={[
              {
                key: 'wrapper',
                label: '总盒子',
                children: <StyleWrapper form={form} preKeys={['detailhot_box', 'default']} onStyleChange={() => upateStyleEvent(['detailhot_box'])} />
              },
              {
                key: "title",
                label: '标题',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'title', ['detailhot_title'], 'detailhot')} />,
                children:
                  <Collapse accordion items={[
                    {
                      key: "box",
                      label: "盒子",
                      children: <StyleWrapper form={form} preKeys={['detailhot_title', 'detailhot_title', 'default']} onStyleChange={() => upateStyleEvent(['detailhot_title', 'detailhot_title'])} />
                    },
                    {
                      key: "text",
                      label: "标题",
                      children: <StyleWrapper form={form} preKeys={['detailhot_title', 'detailhot_title_text', 'default']} onStyleChange={() => upateStyleEvent(['detailhot_title', 'detailhot_title_text'])} />
                    },
                    {
                      key: "subtext",
                      label: "副标题",
                      children: <StyleWrapper form={form} preKeys={['detailhot_title', 'detailhot_title_subtext', 'default']} onStyleChange={() => upateStyleEvent(['detailhot_title', 'detailhot_title_subtext'])} />
                    },
                  ]}
                  />
              },
              {
                key: "list",
                label: '列表',
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'hot', ['detailhot'], 'detailhot')} />,
                children:
                  < GoodAttrEntry type={template2.detailhot.base.type} blockKey='detailhot' form={form} onConfigEvent={onConfigEvent} upateStyleEvent={upateStyleEvent} />
              },
            ]} />
          </>
      },
    ]
    return items
  }, [
    template2.detailhot.base.type,
    updateCtx.updateFlag
  ])


  useEffect(() => {
    setAttrForm(form)
  }, [form])

  return (
    <>
      <Form
        name='detail'
        form={form}
        initialValues={template2}
        labelCol={{
          span: 8,
        }
        }
        autoComplete="off"
        spellCheck="false"
      >

        {/* 按钮区域 */}
        <AttrHeaderBtn onClickEvent={handleHeaderEvent} />

        {/* 对象形式的样式编辑 */}
        <Collapse accordion destroyInactivePanel size='middle' items={items} />

      </Form>

      {/* 字符串形式的样式编辑 */}
      <CssEdit value={template2.css} open={open} onValueChange={cssChange} setOpen={setOpen} ref={cssEditRef} />

    </>
  )
}
export default React.memo(DetailAtrr) 